<template>
  <common-dialog :title="title" :visible="visible" :width="width" :is-top-divided="isTopDivided" ref="Dialog"
                 :is-bottom-divided="isBottomDivided" @close="$emit('cancel',$event)">
    <div v-loading="infoLoading" slot="default" class="global-common-edit-dialog-body" ref="editDialogBody" :style="{'min-height': minHeight + 'px'}">
      <slot name="default"></slot>
    </div>
    <div slot="footer">
      <slot name="footer-button"></slot>
      <el-button @click="$emit('cancel',$event)" v-if="isShowButton">取 消</el-button>
      <el-button data-test="common_dialog-button-submit" type="primary" @click="submit($event)" v-if="isShowButton" :loading="buttonLoading">确 定</el-button>
    </div>
  </common-dialog>
</template>

<script>
import CommonDialog from '@/components/CommonDialog'

export default {
  name: 'CommonEditDialog',
  props: {
    title: {
      type: String
    },
    visible: {
      type: Boolean
    },
    width: {
      type: String
    },
    buttonLoading: {
      type: Boolean,
      default: false
    },
    isTopDivided: {
      type: Boolean,
      default: true
    },
    isBottomDivided: {
      type: Boolean,
      default: true
    },
    minHeight: {
      type: Number,
      default: 0
    },
    infoLoading: {
      type: Boolean,
      default: false
    },
    isShowButton: {
      type: Boolean,
      default: true
    }
  },
  components: {
    CommonDialog
  },
  methods: {
    submit(e) {
      if (!this.buttonLoading) this.$emit('submit', e)
    }
  }
}
</script>

<style scoped lang="scss">
.global-common-edit-dialog-body {
  padding: 12px 18px;
  box-sizing: border-box;
  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
